{% extends "base.html" %}

{% block content %}
<div class="header-for-bg">
    <div class="background-header position-relative">
        <img src="/static/images/page-img/profile-bg3.jpg" class="img-fluid w-100" alt="profile-bg">
        <div class="title-on-header">
            <div class="data-block">
                <h2>{{artist['name']}} Appears On</h2>
            </div>
        </div>
    </div>
</div>

<div id="content-page" class="content-page">
    <div class="container">
        <div class="row">

            {% for album in appears_on %}
            <div class="col-md-6 col-lg-6">
                <div class="iq-card">
                    <div class="iq-card-body">
                        <div class="iq-birthday-block">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <a href="/music/album/{{album['id']}}">
                                        {% set image = '/static/images/white.jpg' %}
                                        {% if album['images'] %}{% set image = album['images'][0]['url'] %}{%endif%}
                                        <img src="{{ image }}" alt="profile-img" class="img-fluid" style="max-width: 300px; max-height: 300px;">
                                    </a>
                                    <div class="friend-info ml-3">
                                        <a href="/music/album/{{album['id']}}"><h5>{{album['name']}}</h5></a>
                                        <a href="/music/artist/{{album['artists'][0]['id']}}"><p class="mb-0">{{album['artists'][0]['name']}}</p></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}

        </div>
    </div>
</div>

{% endblock %}